<template>
  <!--    <header ref="headerBox" :style="{background:'url('+ header_img + ') no-repeat center center'}">-->
  <header ref="headerBox">
    <div class="bg-img">
      <div class="left-box" ref="left-img">
        <img :src="leftImg" alt="">
      </div>
      <div class="center-box" ref="center-img">
        <img :src="centerImg" alt="" >
      </div>
      <div class="right-box" ref="right-img">
        <img :src="rightImg" alt="">
      </div>
    </div>
    <h2 v-if="countyTotal">产业企业总数{{countyTotal}}</h2>
    <h2 v-if="development">专项发展指数{{development}}</h2>
    <div class="title">
      <h1>{{title_name ?  title_name + '建筑产业发展智慧平台' : '重庆市建筑产业发展智慧平台'}}</h1>
    </div>
    <div class="showTime">
      <div class="starts" v-if="starts">
        <el-rate  v-model="starts"  :colors="['#2CA6B5','#2CA6B5','#2CA6B5']" disabled></el-rate>
      </div>
      <div v-else style="display: flex">
        <div class="full-screen-box">
          <screenfull-box :hideBoxFn="hideBoxFn"/>
        </div>
        <span>{{ currentTime }}</span>
      </div>
    </div>
  </header>
</template>

<script>
import { screenHeight, screenWidth } from '@/utils/utils'
import screenfullBox from '@/components/Screenfull/index'
export default {
  name: 'header_top',
  components:{
    screenfullBox
  },
  props:{
    centerWidth: {
      type: Number,
      default: 0
    },
    development: {
      type: Number,
      default: 0
    },
    countyTotal: {
      type: Number,
      default: 0
    },
    title_name: {
      type: String,
      default: ''
    },
    starts: {
      type: Number,
      default: 0
    },
    setLength: {
      type: Function,
      default: function(){}
    },
  },
  data() {
    return {
      currentTime: '',
      leftImg:require('@/assets/images/左.png'),
      centerImg:require('@/assets/images/中.png'),
      rightImg:require('@/assets/images/右.png'),
      //两边宽度
      besideWidth: 0,
    }
  },
  created() {

  },
  mounted() {
    setInterval(() => {
      this.setTime()
    }, 1000)
    if(localStorage.getItem('width')){
      this.$refs['center-img'].style.width = localStorage.getItem('width') + 'px'
    }
    if(localStorage.getItem('besideWidth')){
      this.$refs['left-img'].style.width = localStorage.getItem('besideWidth') + 'px'
      this.$refs['right-img'].style.width = localStorage.getItem('besideWidth') + 'px'
    }
  },
  methods:{
    setWidth(width) {
      localStorage.setItem('width', width)
      const besideWidth = (screenWidth() - width) / 2 + 25
      localStorage.setItem('besideWidth', besideWidth)
      this.$refs['center-img'].style.width = width + 'px'
      this.$refs['left-img'].style.width = besideWidth + 'px'
      this.$refs['right-img'].style.width = besideWidth + 'px'
    },
    hideBoxFn(){
      const headerHeight = document.querySelector('header').offsetHeight
      this.centerHeight = screenHeight() - headerHeight * 2
      this.setLength()
    },
    setTime() {
      let dt = new Date()
      const month = dt.getMonth() + 1
      let time = dt.getFullYear() + '年' +
        month + '月' +
        dt.getDate() + '日-' +
        dt.getHours() + '时' +
        dt.getMinutes() + '分' +
        dt.getSeconds() + '秒'
      this.currentTime = time
    },
  }
}
</script>

<style scoped lang="scss">
.starts{
  position: relative;
  top: -0.2rem;
  height: 0.5rem;
  font-size: 30px;
  display: flex;
  align-items: center;
  ::v-deep .el-rate__icon{
    font-size: .5rem;
  }
}
.bg-img{
  height: 57px;
  position: absolute;
  top: 0;
  width: 100%;
  img{
    width: 100%;
  }
  .left-box{
    width: 24%;
    position: absolute;
    left: 0;
    img{
      height: 43px;
    }
  }
  .center-box{
    width: 55%;
    position: absolute;
    left: 50%;
    img{
      width: 100%;
      height: 57px;
    }
    transform: translateX(-50%);
  }
  .right-box{
    width: 24%;
    position: absolute;
    right: 0;
    img{
      height: 43px;
    }
  }
}
header {
  position: relative;
  height: 1.3rem;
  background-size: 100% 100%;

  h2 {
    position: absolute;
    top: .2rem;
    left: .5rem;
    font-size: 0.35rem;
    color: rgba(255, 255, 255, 0.7);
  }

  .showTime {
    position: absolute;
    display: flex;
    top: .2rem;
    right: 0.375rem;
    font-size: 0.35rem;
    color: rgba(255, 255, 255, 0.7);
    .full-screen-box{
      margin-right: .3rem;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);

    h1 {
      padding-top: 0.1rem;
      font-size: 0.55rem;
      color: #fff;
      text-align: center;
    }

    p {
      text-align: center;
      color: #fff;
      font-size: .3rem;
    }
  }
}
</style>
